<template>
  <div class="container">
    <div class="header">租户信息配置</div>
    <div class="content">
      <el-form class="form" ref="form" :model="form" label-width="80px">
        <el-form-item
          label="租户名称"
          prop="name"
          :rules="[
            {
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                {
                  min: 1,
                  max: 20,
                  message: '长度在 1 到 20 个字符',
                  trigger: 'blur',
                },
              ],
            },
          ]"
        >
          <el-input
            v-model="form.tenantName"
            maxlength="20"
            aria-required=""
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            placeholder="备注信息"
            v-model="form.tenantRemark"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联大屏" prop="region">
          <el-select
            v-model="form.screenIdList"
            placeholder="请选择要关联的大屏"
            multiple
          >
            <el-option
              v-for="(item, i) in tables"
              :key="i"
              :label="item.screenName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="small" @click="cancelFn">取消</el-button>
          <el-button type="small" class="bg1" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "TenantList",
  data() {
    return {
      form: {
        tenantName: "",
        screenIdList: "",
        tenantRemark: "",
        tenantState: 0,
      },
      tables: [],
      rules: [
        {
          name: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            {
              min: 1,
              max: 20,
              message: "长度在 1 到 20 个字符",
              trigger: "blur",
            },
          ],
        },
      ],
    };
  },
  methods: {
    async onSubmit() {
      let ApiUrl = this.$API.addTenant;
      if (this.$route.query.id) {
        ApiUrl = this.$API.updTenant;
        this.form.id = this.$route.query.id;
      }
      try {
        await ApiUrl(this.form);
        this.$message.success("操作成功");
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      } catch (error) {
        console.error(error);
      }
    },
    async getInfo() {
      const res = await this.$API.getTenant({ id: this.$route.query.id });
      const ids = res.screenIdList.map((item) => {
        return item.id;
      });
      this.form = Object.assign(this.form, {
        tenantName: res.tenantName,
        tenantRemark: res.tenantRemark,
        screenIdList: ids,
      });
    },
    async getAllScreen() {
      const res = await this.$API.getAllScreen();
      this.tables = res;
    },
    cancelFn() {
      this.$router.go(-1);
    },
  },
  created() {
    this.getAllScreen();
    if (this.$route.query.id) {
      this.getInfo();
    }
  },
};
</script>
<style>
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  color: #00b3a8 !important;
}
</style>
<style scoped lang="scss">
.container {
  background: #fff;
  width: 100%;
  overflow: hidden;
  .header {
    color: #404144;
    font-weight: 600;
    font-size: 18px;
    line-height: 60px;
    border-bottom: 1px solid #dee0e4;
  }
  .content {
    width: 550px;
    margin: 20px auto;
    ::v-deep .el-input__inner {
      line-height: 32px;
      height: 32px;
    }
    ::v-deep .el-textarea__inner {
      height: 130px;
    }
    ::v-deep .el-select {
      width: 100%;
    }
  }
}
</style>
